<template>
  <div class="loginAndReg">
      <router-link to="/common" class="myexit">
        跳过
      </router-link>
      <div class="clockDiv">
          <img src="static/images/guide-img/clock.png" class="clock" alt=""/>
      </div>
    <router-link to="/login" class="loginDiv">
        LOGIN
    </router-link>
    <router-link to="/register" class="regiserDiv">
        REGISTER
    </router-link >
    <div class="useOther">
        <div></div>
        <div>使用第三方登录</div>
        <div></div>
    </div>
    <div class="myother">
        <div class="myicon">
          <img src="static/images/guide-img/wechat.png" alt=""/>
        </div>
        <div class="myicon">
          <img src="static/images/guide-img/QQ.png" alt=""/>
        </div>
        <div class="myicon">
          <img src="static/images/guide-img/weibo.png" alt=""/>
        </div>
    </div>
  </div>
</template>
<script>
  import login from './login'
    export default{
      name:'loginAndReg',
//      components:{
//        'login':login
//      }
    }
</script>
<style scoped>
  .loginAndReg .myexit{
      color: white;
    border: 2px solid white;
    font-size: 12px;
    padding: 3px 15px;
    border-radius: 20px;
    margin-left: 80%;
  }
  .loginAndReg{
    margin-top: -40px;
    margin-bottom: 0;
    background-image: url("../../static/images/guide-img/10.png");
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  /*.clockDiv{*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-items: center;*/
    /*align-items: center;*/
    /*width: 100px;*/
    /*height: 100px;*/
    /*border-radius: 50px;*/
    /*border: 1px solid black;*/
  /*}*/
    .clock{
      width: 300px;
      height: 300px;
    }
  .loginDiv{
    width: 50%;
    border: 2px solid white;
    font-size: 16px;
    color: white;
    padding: 8px 0;
    border-radius: 35px;
    text-decoration: none;
  }
  .regiserDiv{
    width: 50%;
    /*border: 2px solid white;*/
    font-size: 16px;
    color: white;
    padding: 8px 0;
    border-radius: 35px;
    margin-top: 15px;
    background-color: #F9987A;
    text-decoration: none;
  }
  .useOther{
      margin-top: 50px;
      font-size: 12px;
      width: 70%;
      color: white;
      display: flex;
      flex-direction: row;
      align-content: flex-start;
      justify-content: center;
  }
  .useOther>div:nth-child(1){
      height: 7px;
       width: 20%;
      border-bottom: 1px solid white;
  }
  .useOther>div:nth-child(3){
    height: 7px;
    width: 20%;
    border-bottom: 1px solid white;
  }
  .myother{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 50px;
  }
  .myicon>img{
    width: 50px;
    height: 50px;
  }
  .myicon{
    margin: 0 25px;
  }

</style>
